<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/public.css" />
    <link rel="stylesheet" type="text/css" href="message_style.css"/>
    <!-- px转rem js -->
    <script type="text/javascript" src="../../script/lib-flexible.js"></script>

</head>

<body>
    <div id="container">
      <nav class="box" v-for="(noticelist,index) in noticelists" style="text-align:cneter" @click="openGroup(noticelist.group_id);">
        <div class="left-img1" style="text-align:cneter">
            <img v-bind:src="imghead+noticelist.avatar"/>
            <div class="badge1" v-if="noticelist.count>0&&noticelist.count<=99"></div>
            <div class="badge1" v-if="noticelist.count>99"></div>
            <div class="noticename">{{noticelist.name}}</div>
        </div>
      </nav>
    </div>
    <div class="list" v-cloak v-if="alist">
        <div class="item border-1px-bottom" v-for="(lists,index) in alist" style="padding:5% 0 1% 0" @click="fnOpenChat(lists.name);">
            <div class="swiper-li">
                <div class="flex-wrap">
                    <div class="left-img">
                        <img v-bind:src="imghead+lists.avatar"/>
                        <div class="badge" v-if="lists.count>0&&lists.count<=99">{{lists.count}}</div>
                        <div class="badge" v-if="lists.count>99">99+</div>
                    </div>
                    <div class="flex-con">
                        <div class="center-name">
                            {{lists.name}}
                        </div>
                        <div class="center-body" v-html="fnType(lists.last_message.type,index)"></div>
                        <!---->
                    </div>
                    <div class="right-time">
                        {{lists.last_message.time|formatTime}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<!-- 消除移动端点击延迟300ms -->
<script type="text/javascript" src="../../script/fastclick.js"></script>
<!-- 公共js -->
<script type="text/javascript" src="../../script/common.js"></script>
<!-- 环信接口 -->
<script type="text/javascript" src="../../script/easeChat.js"></script>
<!-- sha1加密 -->
<script type="text/javascript" src="../../script/SHA1.js"></script>
<!-- 滑动 -->
<script type="text/javascript" src="../../script/swiper.js"></script>
<!-- 表情转换js -->
<script type="text/javascript" src="../../script/emotion.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript">
    var footerH;
    var imghead = "http://1.82.238.228:80/files/";
    var message_url="http://1.82.238.228:80/api/message/";
    apiready = function() {
        footerH = $api.getStorage('footerH1');
        window.ListVue1 = new Vue({
            el: '#container',
            data: {
                noticelists: [],
                timeout: false
            },
            mounted: function() {
              this.$nextTick(function() {
                  this.fnInit1();
              });
            },
            beforeDestroy: function() {
                this.timeout = true;
            },
            methods: {
              fnInit1: function(){
                  $.ajax({
                      type: 'POST',
                      url: message_url+"getGroupMessageList/",
                      data:JSON.stringify({user_id:$api.getStorage('user_id')}),
                      dataType: 'json',
                      async: false,
                      success:function(result){
                        console.log('圈子消息列表获取成功！')
                        //group_id
                        window.ListVue1.noticelists=result.data;
                      },
                      error:function(){
                        console.log('圈子消息列表获取失败！');
                      }
                  });
                  if (!this.timeout) {
                    setTimeout(this.fnInit1, 30000);
                  }
              },
              openGroup: function(groupid){
                  $.ajax({
                      type: 'POST',
                      url: message_url+"setGroupMessageStatus/",
                      data:JSON.stringify({user_id:$api.getStorage('user_id'),group_id:"1"}),
                      dataType: 'json',
                      async: false,
                      success:function(result){
                        console.log('圈子未读消息已读成功！')
                      },
                      error:function(){
                        console.log('圈子未读消息已读失败！');
                      }
                  });
                  //跳转到相关圈子
              }
            },
            filters: {

            }
        });
        window.ListVue = new Vue({
            el: '.list',
            data: {
                alist: [],
                timeout: false
            },
            mounted: function() {
              this.$nextTick(function() {
                  this.fnInit();
              });
            },
            beforeDestroy: function() {
                this.timeout = true;
            },
            methods: {
                fnInit: function(){
                    $.ajax({
                        type: 'POST',
                        url: message_url+"getSystemMessageList/",
                        data:JSON.stringify({user_id:$api.getStorage('user_id')}),
                        dataType: 'json',
                        async: false,
                        success:function(result){
                          console.log('通知列表获取成功！')
                          window.ListVue.alist = result.data;
                        },
                        error:function(){
                          console.log('通知列表获取失败！');
                        }
                    });
                    if (!this.timeout) {
                      setTimeout(this.fnInit, 30000);
                    }
                },
                fnType: function(types, index) {
                    if (types == "text") {
                      if (window.ListVue.alist[index].last_message.text == '' || window.ListVue.alist[index].last_message.text == undefined) {
                            return;
                        }
                        msg = window.ListVue.alist[index].last_message.text;
                        var emotionObj = emotion;
                        var regx = /\[(.*?)\]/gm;
                        var translateMSg = window.ListVue.alist[index].last_message.text.replace(regx, function(math) {
                            var imgSrc = emotionObj[math];
                            if (!imgSrc) {
                                return math;
                            }
                            var img = '<img src="../res/img/emotion/' + imgSrc + '.png" class="emotion">'
                            return img;
                        })
                        return translateMSg;
                    }
                    if (types == "voice") {
                        return "[语音]";
                    }
                    if (types == "image") {
                        return "[图片]";
                    }
                    if (types == "video") {
                        return "[视频]";
                    }
                    if (types == "location") {
                        return "[位置]";
                    }
                },
                fnOpenChat: function(name) {
                  $.ajax({
                      type: 'POST',
                      url: message_url+"setSystemMessageStatus/",
                      data:JSON.stringify({user_id:$api.getStorage('user_id'),system_name:name}),
                      dataType: 'json',
                      async: false,
                      success:function(result){
                        console.log('系统未读消息已读成功！')
                      },
                      error:function(){
                        console.log('系统未读消息已读失败！');
                      }
                  });
                  api.openFrame({
                      name: 'interaction_head',
                      url: './interaction_head.html',
                      bounces: false,
                      rect: {
                          marginTop: 0,
                          marginBottom: footerH,
                          w: api.winWidth
                      }
                  });
                }
            },
            filters: {
                // 时间转换
                formatTime: function(v) {
                    return new Date(v).popular();
                }

            }
        });
    };
</script>

</html>
